<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <h6>可以拖拽放大缩小的矩形</h6>
</body>
<script>
    /**
     * dropRect
     * args:{
     *  width
     *  height
     *  left
     *  top
     * }
     * 
    */

    function dropRect(width, height, left, top) {
        this.div = document.createElement('div');
        this.init(width, height, left, top);
        this.action();
    }
    dropRect.prototype = {
        constructor: dropRect,
        init: function (width, height, left, top) {
            this.div.style.width = width;
            this.div.style.height = height;
            this.div.style.left = left;
            this.div.style.top = top;
            this.div.style.position = 'absolute';
            document.body.appendChild(this.div);
        },
        action: function () {
            var _this = this;
            this.div.onmousedown = function (e) {
                var lx = e.clientX - _this.div.offsetLeft;
                var ly = e.clientY - _this.div.offsetTop;
                var ow = _this.div.offsetWidth;
                var oh = _this.div.offsetHeight;
                var ofl = _this.div.offsetLeft;
                var oft = _this.div.offsetTop;
                var boundWidthWc = lx < 10 || _this.div.offsetLeft + _this.div.offsetWidth - e.clientX < 10;
                var boundHeightWc = ly < 10 || _this.div.offsetTop + _this.div.offsetHeight - e.clientY < 10;
                if (boundWidthWc && boundHeightWc) {
                    document.onmousemove = function (ee) {
                        if(lx < 10){
                            _this.div.style.left = ee.clientX + 'px';
                            _this.div.style.width = ofl + ow - ee.clientX + 'px';
                        }
                        if(_this.div.offsetLeft + _this.div.offsetWidth - ee.clientX < 10){
                            _this.div.style.width = ee.clientX - ofl + 'px'; 
                        }
                        if(ly < 10){
                            _this.div.style.top = ee.clientY + 'px';
                            _this.div.style.height = oft + oh - ee.clientY + 'px';
                        }
                        if(_this.div.offsetTop + _this.div.offsetHeight - ee.clientY < 10){
                            _this.div.style.height = ee.clientY - oft + 'px'; 
                        }
                    }
                    document.onmouseup = function () {
                        document.onmouseup = document.onmousemove = null;
                    }
                    return false;
                }
                document.onmousemove = function (ee) {
                    _this.div.style.left = ee.clientX - lx + 'px';
                    _this.div.style.top = ee.clientY - ly + 'px';
                }
                document.onmouseup = function () {
                    document.onmouseup = document.onmousemove = null;
                }
                return false;
            }
        }
    }
    new dropRect('200px', '300px', '30px', '100px');
</script>

</html>